<template>
  <!-- 头部 -->
  <ChatHeader :active-item="activeItem" />
  <n-flex :class="{ 'shadow-inner': true }" :size="0" class="h-full">
    <n-flex vertical :size="0" class="flex-1 relative">
      <template v-if="isMiaoxinAccount">
        <MiaoXin />
      </template>
      <template v-else>
        <!-- 中间聊天框内容  -->
        <ChatMain :active-item="activeItem!" />
        <!-- 输入框和操作列表 -->
        <ChatFooter class="flex-1" :conversation="activeItem" />
      </template>
    </n-flex>
    <ChatSidebar />
  </n-flex>
</template>
<script setup lang="ts">
import TencentCloudChat, { Conversation } from '@tencentcloud/chat'
import { MiaoXinAuditOfficialAccount, MiaoXinSouSouOfficialAccount } from '@/common/tencent.ts'

const { activeItem } = defineProps<{
  activeItem?: Conversation
}>()

provide('activeItem', activeItem)

const isMiaoxinAccount = computed(() => {
  return (
    activeItem?.type === TencentCloudChat.TYPES.CONV_C2C &&
    [MiaoXinAuditOfficialAccount, MiaoXinSouSouOfficialAccount].includes(activeItem?.userProfile.userID)
  )
})
</script>
<style scoped lang="scss">
/**! 修改naive-ui虚拟列表滚动条的间距 */
:deep(
  .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical,
  .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--vertical
) {
  right: 0;
}
</style>
